﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>个人资料</title>
    <link rel="shortcut icon" href="favicon.ico">
	<link href="css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
	<link href="css/plugins/cropper/cropper.min.css" rel="stylesheet">
	<link href="css/plugins/sitelogo/sitelogo.css" rel="stylesheet">
    <link href="css/style.min.css?v=4.0.0" rel="stylesheet">
	<style>
		.dl-horizontal dt{width:70px;padding-bottom:10px;}
		.dl-horizontal dd{margin-left:85px;}
		.showColor{background:#99FFCC;}
	</style>
</head>

<body class="gray-bg">

    <div class="wrapper wrapper-content animated fadeInRight"  style="padding-bottom:0px;">
        <div class="row">
			<div class="col-sm-12">
			<div class="ibox-title">
				<h5>个人资料</h5>
				<div class="ibox-tools">
					<a class="collapse-link" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
						<i class="fa fa-warning"></i>
					</a>
					<a class="collapse-link" href="javascript:location.href=location.href;">
						<i class="fa fa-refresh"></i>
					</a>
				</div>
			</div>
		</div>
			</div>
	</div>

	<div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
			<div class="col-sm-3">
				<div class="ibox-content">
					<div id="myUR" class="text-center" style="margin-bottom:10px;">
						<div id="crop-avatar">
							<div class="avatar-view" style="margin: 0 auto;height: 120px;width: 120px;border-radius:100px;" title="Change Logo Picture">
								<img alt="image" style="margin:0 auto;" class="img-circle img-responsive" src="img/a1.jpg">
							</div>
						</div>
						<div class="m-t-xs nickName"><h3></h3></div>
						<div class="m-t-xs roleName"></div>
					</div>
					<ul class="folder-list" style="padding: 0;cursor:pointer;">
						<li data-code="profile-basicInfo.html"><a href="javascript:void(0);"><i class="fa fa-user"></i>基础资料</a></li>
						<li data-code="profile-myLoginRecord.html"><a href="javascript:void(0);"><i class="fa fa-link"></i>我的登录</a></li>
						<li data-code="profile-myBehavior.html"><a href="javascript:void(0);"><i class="fa fa-car"></i>行为轨迹</a></li>
						<li data-code="profile-updatePassword.html"><a href="javascript:void(0);"><i class="fa fa-key"></i>修改密码</a></li>

					</ul>
				</div>
			</div>
			<div class="col-sm-9">
				<iframe id="iframe0" name="iframe0" width="100%" style="min-height:500px" height="100%" scrolling="no" src="profile-basicInfo.html" frameborder="0"></iframe>
			</div>
		</div>
	</div>

<!-- 图片剪切 -->
<div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<form class="avatar-form" data-code="" action="" enctype="multipart/form-data" method="post">
				<div class="modal-header">
					<button class="close" data-dismiss="modal" type="button">&times;</button>
					<h4 class="modal-title" id="avatar-modal-label">Change Logo Picture</h4>
				</div>
				<div class="modal-body">
					<div class="avatar-body">
						<div class="avatar-upload">
							<input class="avatar-src" name="avatar_src" type="hidden">
							<input class="avatar-data" name="avatar_data" type="hidden">
							<label for="avatarInput">图片上传</label>
							<input class="avatar-input" id="avatarInput" name="avatar_file" type="file"></div>
						<div class="row">
							<div class="col-md-9">
								<div class="avatar-wrapper"></div>
							</div>
							<div class="col-md-3">
								<div class="avatar-preview preview-lg"></div>
								<div class="avatar-preview preview-md"></div>
								<div class="avatar-preview preview-sm"></div>
							</div>
						</div>
						<div class="row avatar-btns">
							<div class="col-md-9">
								<div class="btn-group">
									<button class="btn" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees"><i class="fa fa-undo"></i> 向左旋转</button>
								</div>
								<div class="btn-group">
									<button class="btn" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees"><i class="fa fa-repeat"></i> 向右旋转</button>
								</div>
							</div>
							<div class="col-md-3">
								<button class="btn btn-success btn-block avatar-save" type="submit"><i class="fa fa-save"></i> 保存修改</button>
							</div>
						</div>
					</div>
				</div>
  		</form>
  	</div>
  </div>
</div>

<div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>

    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.5"></script>
    <script src="js/content.min.js?v=1.0.0"></script>
	<script src="js/plugins/toastr/toastr.min.js"></script>
	<script src="js/plugins/cropper/cropper.min.js"></script>
	<script src="js/plugins/sitelogo/sitelogo.js"></script>
    <script type="text/javascript" src="js/custom/tools.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/custom/app.js" charset="UTF-8"></script>
	<script>
		let userInfo
		$(function(){
			$("form.avatar-form").attr("action",domain + "fileRun/uploadMyLogo");
			$(".folder-list li:eq(0)").addClass("showColor");
			$(".folder-list li").on("click",function(){
				$(".folder-list li").removeClass("showColor");
				$(this).addClass("showColor");
				var url = $(this).data("code");
				$("#iframe0").attr("src",url);
			});

			userInfo = app.getUserInfo();
			getMySimpleInfo();

			$("form.avatar-form").data("code",userInfo);
		})

		function getMySimpleInfo(){
			var url = 'sysUser/getMySimpleUserInfo';
			jQuery.ajax({
				url:domain + url,
				type:"get",
				data:{"mailOrUsername":userInfo.username},
				crossDomain:true,
				xhrFields:{
					withCredentials:true
				},
				success:function (data) {
					if(data.status == 200){
						combMyInfoHTML(data.data);
					}else{
						top.toastr.error(data.msg);
					}
				},
				error:function(data) {
					top.toastr.error("查询失败，请检查网络");
				}
			})
		}

		function combMyInfoHTML(data){
			$("#myUR .nickName h3").html(data.nickName);
			$("#myUR .roleName").html(data.roleName);
			$("#myUR img").attr("src",domain+data.profilePhoto+"?t="+Math.random());
		}
	</script>
</body>

</html>
